<!DOCTYPE HTML>
<html>
<head>
    <title>终端分布图</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
    <style type="text/css">
        body, html, #allmap {
            width: 100%;
            height: 100%;
            overflow: hidden;
            margin: 0;
            font-family: "微软雅黑";
        }
        #up-map-div {
            width:500px;
            height:40px;
            top:40px;
            left:40px;
            position:absolute;
            z-index:9999;
        }
        #battery-status-div {
            width:190px;
            height:160px;
            top:140px;
            left:40px;
            position:absolute;
            z-index:9999;
            background-color: rgba(102, 102, 102, 0.2);
        }
        .button {
            background: #3498db;
            background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
            background-image: -moz-linear-gradient(top, #3498db, #2980b9);
            background-image: -ms-linear-gradient(top, #3498db, #2980b9);
            background-image: -o-linear-gradient(top, #3498db, #2980b9);
            background-image: linear-gradient(to bottom, #3498db, #2980b9);
            -webkit-border-radius: 13;
            -moz-border-radius: 13;
            border-radius: 13px;
            font-family: Arial;
            color: #ffffff;
            font-size: 14px;
            padding: 6px 20px 6px 20px;
            text-decoration: none;
        }

        .button:hover {
            background: #2980b9;
            background-image: -webkit-linear-gradient(top, #2980b9, #3498db);
            background-image: -moz-linear-gradient(top, #2980b9, #3498db);
            background-image: -ms-linear-gradient(top, #2980b9, #3498db);
            background-image: -o-linear-gradient(top, #2980b9, #3498db);
            background-image: linear-gradient(to bottom, #2980b9, #3498db);
            color: #ffffff;
            text-decoration: none;
        }
        #id {
            width: 200px;
            height: 25px;
            margin-right: 20px;
            border-radius: 5px;
            border-style: hidden;
            padding-left: 5px;
        }
        li {list-style-type:none;}
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=${controller.appConfig.mapKey}"></script>
    <script type="text/javascript" src="${contextPath}/static/tool/jquery/jquery-1.8.0.min.js"></script>
</head>
<body>
<div id="allmap"></div>
<#-- 悬浮搜索框 -->
<div id="up-map-div">
    <span style="color:white">终端编号：</span>
    <input type="text" class="text" id="id" name="id"/>
    <button class="button" onclick="query()">搜索</button>
</div>
<#-- 悬浮电池信息框 -->
<div id="battery-status-div" style="color: white">
    <ul>
        <li>柜机总数：<span id="cabinet_sum"></span></li>
        <li><img src="/static/images/battery_status_white.png" style="width: 20px;height: 20px"/> 空闲：<span id="status1"></span></li>
        <li><img src="/static/images/battery_status_yellow.png" style="width: 20px;height: 20px"/> 充电中：<span id="status2"></span></li>
        <li><img src="/static/images/battery_status_green.png" style="width: 20px;height: 20px"/> 充满：<span id="status3"></span></li>
        <li><img src="/static/images/battery_status_lightBlue.png" style="width: 20px;height: 20px"/> 使用中：<span id="status4"></span></li>
        <li><img src="/static/images/battery_status_gray.png" style="width: 20px;height: 20px"/> 其他：<span id="status5"></span></li>
    </ul>
</div>
</body>
<script type="text/javascript">
    var map = new BMap.Map("allmap");
    map.centerAndZoom(new BMap.Point(109.369334, 38.16197), 5);  // 初始化地图,设置中心点坐标和地图级别
    map.setCurrentCity("西安");           // 设置地图显示的城市 此项是必须设置的
    map.enableScrollWheelZoom(true);     // 开启鼠标滚轮缩放
    var convertor = new BMap.Convertor();
    var pointList = new Array();
    if (document.createElement('canvas').getContext) {  // 设置画布
        var mapStyle = {
            features: ["road", "building", "water", "land"], // 隐藏地图上的poi Point of Interest
            style: "normal"  // 设置地图风格为高端黑
        };
        map.setMapStyle(mapStyle); // 设置地图风格
        <#-- ajax 请求数据（坐标） -->
        $.post("${contextPath}/security/hdw/cabinet/coordinate.htm", function (json) {
            if (json.success == 1) {
                var points = [];  // 添加海量点数据
                for(var i = 0; i < json.data.length; i++) {
                    var point = new BMap.Point(json.data[i].lng, json.data[i].lat);
                    point.id = json.data[i].id;
                    point.cabinetName = json.data[i].cabinetName;
                    point.version = json.data[i].version;
                    point.fullVolume = json.data[i].fullVolume;
                    points.push(point);
                }
                // 设置标记点参数
                var options = {
                    size: BMAP_POINT_SIZE_BIG,
                    shape: BMAP_POINT_SHAPE_STAR,
                    color: '#5ff230'
                };

            <#-- 分支判断 -->
            if (points.length > 0) {
                var pointCollection = new BMap.PointCollection(points, options);
                pointCollection.addEventListener('click', function (e) {
                    var p=e.point;
                    var point = new BMap.Point(e.point.lng, e.point.lat);
                    var opts = {
                        width: 280,          // 信息窗口宽度
                        height: 150,         // 信息窗口高度
                        title: "柜机信息",    // 信息窗口标题
                        enableMessage: false // 设置允许信息窗发送短息
                    };
                    var stylePoint = '<div style="margin-top:15px;">';
                    stylePoint += '<div>终端编号：'+p.id+'</div>';
                    stylePoint += '<div>终端名称：'+(p.cabinetName==null?"":p.cabinetName)+'</div>';
                    stylePoint += '<div>版本：'+p.version+'</div>';
                    stylePoint += '<div>满电soc：'+(p.fullVolume==null?"":p.fullVolume)+'%</div>';
                    stylePoint += '</div>';
                    var infowindow = new BMap.InfoWindow(stylePoint, opts);
                    map.openInfoWindow(infowindow, point);
                });
                map.addOverlay(pointCollection);  // 添加Overlay
                }
                $("#cabinet_sum").html(points.length);
            } else {
                $.messager.alert('提示消息', json.message, 'info');
            }
        }, 'json');
    } else {
        alert('请在chrome、safari、IE8+以上浏览器查看本示例');
    }
    function pointListInfo(list) {
        var pointArr = [];
        $.each(list, function (index, coor) {
            var point = new BMap.Point(coor.lng, coor.lat);
            pointArr.push(point);
            if (pointArr.length == 10 || index + 1 == list.length) {
                convertor.translate(pointArr, 1, 5, translateCallback);
                pointArr.length = 0;
            }
        });
    }
    function translateCallback(data) {
        $.each(data.points, function (index, point) {
            pointList.push(point)
        })
    }
</script>
